const path = require('path')
// 在内存中，根据指定得模板页面生成一份内存中得页面，同时将打包好得js注入页面
const htmlWebpackPlugins = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行

module.exports = {
    // 入口 表示使用webpack打包哪个文件
    entry: path.join(__dirname, '/src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true,//自动打开浏览器
        port: 3000,//设置启动时得端口
        contentBase: 'src',//指定托管得根目录
        hot: true //启动热更新
    },
    plugins: [
        // 创建一个在内存中生成html页面得插件
        new htmlWebpackPlugins({
            // 指定模板页面
            template: path.join(__dirname, './src/index.html'),
            // 指定生成页面得名称
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    // 这个节点 用于配置 所有第三方模块得加载器
    module: {
        rules: [
            // 配置匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //limit参数是图片大小byte 如果引用得图片大于等于limit得值 不会转为base64得字符串 否则会转为base64
            //name参数作用是保持图片名称不会改变 如果不设置 系统会为图片重新命名 以防止重名
            { test: /\.(jpg|png|gif|bmp|jpeg|ttf)$/, use: 'url-loader?limit=580000&name=[hash:8]-[name].[ext]' },
            //配置babel转换高级的js语法
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            //vue
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve: {
        alias: {
            //"vue$": "vue/dist/vue.esm.js"
        }
    }
}

// webpack --mode development 执行时 发现没有指定入口和出口 会从项目根路径查找‘webpack.config.js’文件  解析执行
// 解析执行完毕 得到配置文件中导出的配置对象 得到入口和出口 打包构建